{{define "index"}}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>{{.extend.meta.title}} - {{.extend.profile.name}}</title>
		<meta name="description" content="{{.extend.meta.description}}" />
		<meta name="keywords" content="{{.extend.meta.keywords}}" />
		<link rel="alternate" href="{{.path}}" hreflang="en" />
		<link rel="canonical" href="{{.path}}" />
		<link rel="stylesheet" href="/assets/css/output.css" />
	</head>
	<body>
		<!-- header -->
		{{template "header" .}}

		<!-- main -->
		<main>
			<!-- banner -->
			{{template "banner" .}}

			<!-- highlight -->
			<div class="w-11/12 max-w-screen-xl mx-auto -mt-10 mb-10 bg-white rounded-xl md:rounded-3xl shadow">
				<ul class="flex flex-row flex-wrap text-center">
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/sample.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">Simple</p>
						<p class="text-base text-gray-500">only 4 command, easy to use</p>
					</li>
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/quick.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">Fast</p>
						<p class="text-base text-gray-500">serve & build mode, both start less than 1s</p>
					</li>
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/customize.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">Customize</p>
						<p class="text-base text-gray-500">setting path & router & theme all in toml</p>
					</li>
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/markdown.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">Markdown</p>
						<p class="text-base text-gray-500">syntax highlighting & toc markdown support</p>
					</li>
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/i18n.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">I18N</p>
						<p class="text-base text-gray-500">add multi-language not need to change any code</p>
					</li>
					<li class="w-1/2 md:w-1/3 py-6">
						<p>
							<img class="h-10 mx-auto" src="/assets/img/icon/seo.png" alt="" />
						</p>
						<p class="text-2xl text-cyan-900 leading-loose">SEO</p>
						<p class="text-base text-gray-500">automatic seo friendly siteamp</p>
					</li>
				</ul>
			</div>

			<!-- customize -->
			<div class="bg-white">
				<!-- blog -->
				<div class="w-11/12 max-w-screen-xl mx-auto py-10 text-center flex flex-row flex-wrap justify-center">
					<div class="w-full md:w-1/4">
						<p class="y60 fs18">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
								/>
							</svg>
							<span>Document</span>
						</p>
						<p class="y60 fs18">
							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
								<path
									stroke-linecap="round"
									stroke-linejoin="round"
									stroke-width="2"
									d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"
								/>
							</svg>
							<span>Blog</span>
						</p>
					</div>
					<div class="w-full md:w-1/4">
						<div>you can add a dir</div>
						<div>you can add a page</div>
					</div>
				</div>

				<!-- document -->
				<div class="w-11/12 max-w-screen-xl mx-auto text-center flex flex-row flex-wrap justify-center">
					<div class="w-full md:w-1/4">
						<p class="y60 fs18">not only a blog</p>
						<p class="y60 fs18">customize it yourself</p>
					</div>
					<div class="w-full md:w-1/4">
						<div>you can add a dir</div>
						<div>you can add a page</div>
					</div>
				</div>

				<!-- page -->
				<div class="w-11/12 max-w-screen-xl mx-auto py-10 text-center flex flex-row flex-wrap justify-center">
					<div class="w-full md:w-1/4">
						<p class="y60 fs18">not only a blog</p>
						<p class="y60 fs18">customize it yourself</p>
					</div>
					<div class="w-full md:w-1/4">
						<div>you can add a dir</div>
						<div>you can add a page</div>
					</div>
				</div>
			</div>

			<!-- theme -->
			<div class="bg-white">
				<div class="w-11/12 max-w-screen-xl mx-auto py-16 text-center flex flex-row flex-wrap">
					<p class="w-full leading-loose text-3xl">Theme</p>
					<div class="">
						<div>you can add a dir</div>
					</div>
					<div class="">
						<p class="">300+ themes</p>
						<p class="">get one without any code</p>
					</div>
				</div>
			</div>

			<!-- install -->
			<div class="bg-cyan-900 text-white">
				<div class="w-11/12 max-w-screen-xl mx-auto py-16 flex flex-row flex-wrap">
					<div class="w-0 md:w-2/12"></div>
					<div class="w-full md:w-3/12 py-10 text-center">
						<p class="h-10 my-5 text-3xl">SUPPORT ON</p>
						<ul class="flex flex-row">
							<li class="w-full md:w-1/3">
								<p class="">
									<img class="h-10 mx-auto" src="https://tikcc.app/assets/img/t_icon_apple.png" alt="" />
								</p>
								<p class="h-10 leading-10">Macos</p>
							</li>
							<li class="w-full md:w-1/3">
								<p class="">
									<img class="h-10 mx-auto" src="https://tikcc.app/assets/img/t_icon_linux.png" alt="" />
								</p>
								<p class="h-10 leading-10">Linux</p>
							</li>
							<li class="w-full md:w-1/3">
								<p class="">
									<img class="h-10 mx-auto" src="https://tikcc.app/assets/img/t_icon_windows.png" alt="" />
								</p>
								<p class="h-10 leading-10">Windows</p>
							</li>
						</ul>
					</div>
					<div class="w-0 md:w-2/12"></div>
					<div class="w-full md:w-3/12">
						<ul class="x100">
							<li class="h-10 leading-10">brew</li>
							<li class="h-10 leading-10 px-4 bg-yellow-300 rounded-md text-black">$ brew install fungo</li>
							<li class="h-10 leading-10">snap</li>
							<li class="h-10 leading-10 px-4 bg-yellow-300 rounded-md text-black">$ snap install fungo</li>
							<li class="h-10 leading-10">choco</li>
							<li class="h-10 leading-10 px-4 bg-yellow-300 rounded-md text-black">$ choco install fungo</li>
						</ul>
					</div>
					<div class="w-0 md:w-2/12"></div>
				</div>
			</div>

			<!-- example -->
			<div class="bg-white">
				<div class="w-11/12 max-w-screen-xl mx-auto py-16 text-center flex flex-row flex-wrap">
					<p class="w-full leading-loose text-3xl">Show Case</p>
					<ul class="container x-between">
						<li class="x30 y240 b-border br8">1</li>
						<li class="x30 y240 b-border br8">2</li>
						<li class="x30 y240 b-border br8">3</li>
					</ul>
				</div>
			</div>

			<!-- partner -->
			<div class="bg-white">
				<div class="w-11/12 max-w-screen-xl mx-auto py-16 text-center flex flex-row flex-wrap">
					<p class="w-full leading-loose text-3xl">Partner</p>
					<ul class="container x-between">
						<li class="x25 y160 b-bottom b-right">1</li>
						<li class="x25 y160 b-bottom b-right">2</li>
						<li class="x25 y160 b-bottom b-right">3</li>
						<li class="x25 y160 b-bottom">4</li>
					</ul>
					<ul class="container x-between">
						<li class="x25 y160 b-right">1</li>
						<li class="x25 y160 b-right">2</li>
						<li class="x25 y160 b-right">3</li>
						<li class="x25 y160">4</li>
					</ul>
				</div>
			</div>
		</main>

		<!-- footer -->
		{{template "footer" .}}
	</body>
</html>
{{end}}
